<template>
  <div id="indexNews" class="hot_notice">
    <div v-for="(item, index) in newsList" :key="index" style="text-align: left">
      <span>[{{ item.categoryName }}]</span>
      <a @click="newsInfo(item.id)"> {{ item.title }}</a>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, toRefs} from "vue";
import {useRoute, useRouter} from "vue-router";
import {ElLoading} from "element-plus";
import {listLatestNews} from "@/api/news";

interface NewsList {
  categoryName: string;
  id: number;
  title: string;
}

const state = reactive({
  newsList: [] as NewsList[],
});
const {newsList} = toRefs(state)
const route = useRoute();
const router = useRouter();
onMounted(async () => {
  const loadingInstance = ElLoading.service({
    target: "#indexNews",
    text: "加载中。。。",
  });
  const {data} = await listLatestNews();
  loadingInstance.close();

  state.newsList = data;
});
const newsInfo = (newsId: any) => {
  router.push({path: `/news/${newsId}`});
};

</script>
<style lang="scss" scoped>
.hot_notice {
  //border: 1px solid #000;
  width: 100%;
  box-sizing: border-box;
  line-height: 20px;

  & > div {
    align-items: center;
    margin-bottom: 10px;
    color: #333;

    span {
      margin-right: 5px;
      font-weight: bold;
      color: #999;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: 16px;
    }

    a {
      text-decoration: none;
      font-size: 14px;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>